{% extends "base.html" %}
{% load static %}


{% block title %}
<title>晋哆咕-登录</title>
{% endblock %}


{% block css %}
<style>
    body {
    }
    .login-form {
        margin-top: 100px;
        background-color: #fff;
    }
    .check_username {
        width: 16px;
        height: 16px;
        float: right;
        margin-right: 20px;
        margin-top: -83px;
    }
    .image-back {
        display: inline-block;
    }
    .image-back span {
        background-image: url("/static/img/login-person-bg.png");
        color: hotpink;
        font-size: 30px;
    }
</style>
{% endblock %}


{% block body %}
<div class="login-form">
    <form action="" method="post" class="form-login">
    {% csrf_token %}
    <div class="form-group">
        {{ login_form }}
        <span id="img_span" class="check_username img-update-no"></span>
    </div>
    <div class="form-group">
        {% if error %}
        <p class="alert alert-danger">{{ error }}</p>
        {% endif %}
    </div>
    <button style="color:green" type="submit" class="btn btn-info">登录</button>
</form>
</div>
<div>
    <hr>
    <span style="color:hotpink">快捷登录：</span>
    <a href=""><img src="/static/img/微博.png" alt=""></a>
</div>
<div class="image-back">

</div>
{% endblock %}


{% block js %}
<script>
    let allContents = {{ all_contents|safe }};
    let username = document.getElementById('username');
    let img = document.getElementById('img_span');
    username.addEventListener('input', function () {
        let inputValue = this.value;
        if (allContents.includes(inputValue)) {
            img.style.backgroundImage = "url('{% static 'img/对钩.png' %}')";
            } else {
            img.style.backgroundImage = "url('{% static 'img/叉叉.png' %}')";
            }
    });
    let imageContainer = document.querySelector('.image-back');
    let originalImage = '/static/img/login-person1.jpg';
    let touchedImage = '/static/img/login-person2.jpg';
    let imgElement = document.createElement('img');
    imgElement.src = originalImage;
    let spanElement = document.createElement('span');
    spanElement.textContent = '欢迎江江回家٩(๑>◡<๑)۶';
    imageContainer.appendChild(imgElement);
    imageContainer.appendChild(spanElement);
    imageContainer.addEventListener('mouseenter', function () {
        imgElement.src = touchedImage;
        spanElement.textContent = '想不起来密码了吗/(ㄒoㄒ)/~~';
    });
    imageContainer.addEventListener('mouseleave', function () {
        imgElement.src = originalImage;
        spanElement.textContent = '欢迎江江回家٩(๑>◡<๑)۶';
});
</script>
{% endblock %}

